<template>
    <view v-if="loading.show" class="loading-wrapper flex-column-align-center cu-load load-modal">

    </view>
</template>

<script>

export default {
    computed: {
        loading() {
            return this.$store.state.loading
        }
    }
}
</script>

<style lang="scss" scoped>
.loading-wrapper {
    // background: transparent;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1500;
}

@keyframes circle-1 {
    from {
        transform: rotateZ(360deg);
    }
    to {
        transform: rotateZ(0deg);
    }
}

@keyframes circle-2 {
    from {
        transform: rotateZ(-360deg);
    }
    to {
        transform: rotateZ(0deg);
    }
}

.black {
    background: rgba($color: #000000, $alpha: 0.8);
}
.loading-box {
    width: 300rpx;
    height: 300rpx;
    position: relative;
    border-radius: 20rpx;
    .out {
        width: 232rpx;
        height: 232rpx;
        position: absolute;
        left: 34rpx;
        top: 34rpx;
        animation: circle-1 3s linear infinite;
    }
    .in {
        width: 250rpx;
        height: 250rpx;
        position: absolute;
        left: 25rpx;
        top: 25rpx;
        animation: circle-2 3s linear infinite;
    }
    .title {
        width: 90rpx;
        height: 13rpx;
        position: absolute;
    }
}
</style>